"use client";

import * as React from "react";
import Link from "next/link";

import { cn } from "@/lib/utils";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
export function TEANavigationMenu() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {/* <NavigationMenuItem>
          <NavigationMenuTrigger>
            <Home className="w-4 h-4 mr-2" />
            首页
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[700px] lg:grid-cols-[.75fr_1fr]">
              <li className="row-span-3">
                <NavigationMenuLink asChild>
                  <Link
                    href="/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                  >
                    <Coffee color="#000" />
                    <div className="mb-2 mt-4 text-lg font-bold">SIMGPA</div>
                    <p className="text-sm leading-tight text-muted-foreground">
                      武汉大学信息管理学院GPA计算平台。
                    </p>
                  </Link>
                </NavigationMenuLink>
              </li>
              <ListItem href="/data" title="介绍" Icon={SquareTerminal}>
                管理员数据上传
              </ListItem>
              <ListItem
                href="/data/uploads"
                title="数据上传"
                Icon={DatabaseIcon}
              >
                上传毕业生成绩数据到服务器。
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem> */}

        {/* <NavigationMenuItem>
          <NavigationMenuTrigger>
            <LayoutGrid className="w-4 h-4 mr-2" /> 智能体管理
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[700px] ">
              {tool_components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                  Icon={component.Icon}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem> */}

        {/* <NavigationMenuItem>
          <NavigationMenuTrigger>
            <Slack className="w-4 h-4 mr-2" />
            示范空间
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[700px] ">
              {app_components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                  Icon={component.Icon}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem> */}
        <NavigationMenuItem>
          <Link href="/gpa/uploads" legacyBehavior passHref>
            <NavigationMenuLink
              target="_blank"
              rel="noopener noreferrer"
              className={navigationMenuTriggerStyle()}
            >
              绩点测算
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <Link href="/gpa/users" legacyBehavior passHref>
            <NavigationMenuLink
              target="_blank"
              rel="noopener noreferrer"
              className={navigationMenuTriggerStyle()}
            >
              学生信息录入
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <Link href="/gpa/feedback/admin" legacyBehavior passHref>
            <NavigationMenuLink
              target="_blank"
              rel="noopener noreferrer"
              className={navigationMenuTriggerStyle()}
            >
              查看反馈信息
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>

        {/* <NavigationMenuItem>
          <Link href="/api/doc" legacyBehavior passHref>
            <NavigationMenuLink
              target="_blank"
              rel="noopener noreferrer"
              className={navigationMenuTriggerStyle()}
            >
              api
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem> */}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const ListItem = React.forwardRef<
  React.ElementRef<"a">,
  React.ComponentPropsWithoutRef<"a"> & {
    Icon?: React.ElementType;
    title: string;
  }
>(({ className, title, children, Icon, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          ref={ref}
          target="_blank"
          rel="noopener noreferrer"
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
          {...props}
        >
          <div className="grid grid-cols-[25px_auto] items-center gap-0.5">
            {Icon && <Icon className="w-14 h-14" />}
            <div>
              <div className="text-sm font-medium leading-none">{title}</div>
              <p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1">
                {children}
              </p>
            </div>
          </div>
        </a>
      </NavigationMenuLink>
    </li>
  );
});
ListItem.displayName = "ListItem";
